<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;  
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<link rel="stylesheet" type="text/css" href="css/pagination.css">
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css">
<title>${topic.title }</title>
<style>
#topicTable
{
	padding-bottom: 20px;
	border-style: solid;
	border-width: 1px;
}
.title
{
	font-size: 20px;
	font-style: normal;
}


.tdStyle1
{
	width: 160px;
	border-right-style: solid;
	border-right-width: 1px;
	border-color: #aaa;
	border-bottom-color: #557FFF;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	vertical-align: top;
	
}

.tdStyle2
{
	border-bottom-color: #ACD8FA;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	vertical-align: bottom;
}

.tdStyle3
{
	border-right-style: solid;
	border-right-width: 1px;
	border-color: #aaa;
}
.dashLined
{
	border-bottom-color: #999;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	padding-bottom: 10px;
	vertical-align: bottom;
}
.content
{
	padding: 15px;
	display:inline-block;
}
.bottomLoginDiv
{
		border-color: #AAA;
		border-style: solid;
		border-width: 1px;
		text-align: center;
		padding: 40px;
}

#loginDialog
{
	position: absolute;	
	top:expression((body.clientWidth-50)/2);
	left::expression((body.clientHeight-50)/2);
	border-color: #AAA;
	border-style: solid;
	border-width: 1px;
	padding: 20px;
	width: 450px;
	height: 80px;
	background: white;
	-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
	box-shadow: 10px 10px 5px #888888;
	font-size: 12px;
}
</style>
<script>
//Initialize pagination
$(document).ready(function(){
	initPagination();
});

function initPagination() {
    // count entries inside the hidden content
    var num_entries =${topic.reply}+1;
    // Create content inside pagination element
    $("#pagination").pagination(num_entries, {
        callback: pageselectCallback,
        items_per_page:10,
        next_text:"Next",
        prev_text:"Prev",
        current_page:(${page.currentPage}-1)
    });
    $("#pagination2").pagination(num_entries, {
        callback: pageselectCallback,
        items_per_page:10,
        next_text:"Next",
        prev_text:"Prev",
        current_page:(${page.currentPage}-1)
    });
 }
 
//page it
function pageselectCallback(page_index, jq){	
    window.location.href="topicAction!getTopicById.action?id=${topic.id}&pageIndex="+(page_index+1);    
    return false;
}
tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    //plugins : "autolink,spellchecker,pagebreak,style,,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    plugins:"preview,fullscreen,emotions",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,image,link,unlink,emotions,code,|,fullscreen,preview,",
    //theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,undo,redo,|,anchor,cleanup,|,insertdate,inserttime,preview,",
    //theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,",
    //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_buttons4 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_disable : "bullist,numlist,hr,removeformat,sub,sup,undo,redo,anchor,cleanup,help,indent,outdent,separator,visualaid,charmap,",    
    

    // Skin options
    skin : "o2k7",
    skin_variant : "silver",

    // Example content CSS (should be your site CSS)
    content_css : "css/example.css",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "js/template_list.js",
    external_link_list_url : "js/link_list.js",
    external_image_list_url : "js/image_list.js",
    media_external_list_url : "js/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
            username : "Some User",
            staffid : "991234"
    }
});

function displayLoginDialog()
{
	$("#loginDialog").attr("style","display:block;top:30%;left:30%;position:fixed;");
	$("#nameOrEmail2").focus();
	$( "#loginDialog" ).draggable();
}
function hideLoginDialog()
{
	$("#loginDialog").attr("style","display:none;");
}
function login2()
{
	
	$.ajax({
		  type:"GET",
		  url: "userAction!login.action?loginType="+$("#loginType2").val()+"&nameOrEmail="+$("#nameOrEmail2").val()+"&user.password="+$("#password2").val(),		
		  success: function(mess)
		  {
		   	 if(mess.indexOf("r")>0)
		   		 alert("Login fail.You have enter an invalid account.");
		   	 else	   		  
		   	 	   window.location.href="<%=basePath%>${currentUrl}";
		  }
		});
}

function loginEvent2()
{
	if(event.keyCode==13)login2();
}

function addNewReply()
{	
	var content=tinyMCE.get('replyContent').getContent();
	content=encodeURI(encodeURI(content));
	
	$.ajax({
		  type:"GET",
		  url: "replyAction!addNewReply.action?reply.content="+content+"&authorId=${user_session.id}&topicId=${topic.id}",
		  dataType:"json",
		  success: function(mess)
		  {
			  //alert(mess);
			  var content="";
			  content+="<tr><td class='tdStyle3'><div class='dashLined'>"+mess.authorName+"</div></td>";
			  content+="<td><div class='dashLined'>Posted at "+mess.createTime;
			  content+="<div style='float:right'>"+mess.floor+"#</div></div></td></tr>";
			  content+="<tr valign='top'><td class='tdStyle3'><img src='avatar/default.jpg'></td>";
			  content+="<td>"+mess.content+"</td></tr>";
			  content+="<tr><td class='tdStyle3'>";
			  content+="<table><tr><td>score</td><td>"+mess.score+"</td></tr><td>post</td><td>"+mess.post+"</td></tr></table></td>";
			  content+="<td><div class='dashLined'></div></td>";
			  content+="<tr><td class='tdStyle1'></td><td class='tdStyle2'>";
			  content+="<a href='replyAction!editReply.action?replyId="+mess.newReplyId+"&topic.title=${topic.title}&topic.id=${topic.id}&pageIndex=${page.currentPage}'>Edit</a>";
			  content+="</td></tr>";
			  
			  
		   	 $("#topicTable").append(content);
		   	var inst = tinyMCE.getInstanceById("replyContent");
		   	inst.setContent("");
		  }
		});
}
</script>
</head>
<body>
<jsp:include page="WEB-INF/head.jsp"></jsp:include>
<div id="mainForm" >
<font class="bigBlue">adanBreak-System forum</font><hr>
<a href="index.jsp">adanBreak-system</a>><a href="forum.jsp">forum thread</a>>${topic.title}<br>
<div id="pagination" style="float:right;"></div><br><br>
<!-- Topic body start -->
<table bordercolor="#aaa" cellspacing="0" cellpadding="10" width="900" id="topicTable">
<thead>
<tr><td class="tdStyle1">View:${topic.view }|Reply:${topic.reply }</td><td class="tdStyle2"><font class="title">${topic.title }</font></td></tr>
</thead>


 <c:forEach items="${replies}" var="r">
<tr><td class="tdStyle3"><div class="dashLined">${r.author.name }</div></td>
<td ><div class="dashLined">Posted at ${r.createTime}
<div style="float:right">${r.floor }#</div></div> </td></tr>
<tr valign="top"><td class="tdStyle3"><img src="avatar/default.jpg"></td>
<td >${r.content }</td></tr>
<tr><td class="tdStyle3">
<table><tr><td>score</td><td>${r.author.score}</td></tr><tr><td>post</td><td>${r.author.post }</td></tr></table></td>
<td ><div class="dashLined"></div></td>
<tr><td class="tdStyle1"></td><td class="tdStyle2">
<c:if test="${r.author.id==user_session.id}">
<a href="replyAction!editReply.action?replyId=${r.id }&topic.title=${topic.title}&topic.id=${topic.id}&pageIndex=${page.currentPage}">Edit</a>
</c:if>
</td></tr>


</c:forEach> 
 

</table><br>
<div id="pagination2" style="float:right;"></div><br><br>

<!-- Topic body end -->	
<!-- Reply Editor start -->
<c:choose >
<c:when test="${user_session!=null }">
<form method="post" action="somepage" >
        <textarea name="content" style="width:100%;" id="replyContent"></textarea><br>
        <input type="button" value="Reply"  onclick="addNewReply()" id="replyBtn">
        <script>
        $("#replyBtn").button();
        </script>
</form>
</c:when>
<c:otherwise>
<div class="bottomLoginDiv"><a href="javascript:displayLoginDialog();">Login in</a> to add reply.</div>
</c:otherwise>
</c:choose>
<!-- Reply Editor end -->
</div>

<!-- login form start -->
<div id="loginDialog"  style="display:none;" >
<a href="javascript:hideLoginDialog()"  style="float:right" title="close">
<img src="img/close.png" width="20" height="20">
</a>
<form action="userAction!login.action" style="height:36px;" autocomplete="off">
<table>
<tr>
<td>
<div class="DivSelect">
<select name="loginType" class="SelectList" id="loginType2">
<option value="byName">Name</option>
<option value="byEmail">Email</option>
</select>
</div>
</td>
<td><input name="nameOrEmail" type="text" id="nameOrEmail2" onkeypress="loginEvent2();" class="inputBlue"></td>
<td><a href="findPw.jsp">Find My Password</a></td>
</tr>
<tr>
<td>Password</td>
<td><input name="user.password" type="password" id="password2" onkeypress="loginEvent2();" class="inputBlue"></td>
<td>
<a href="javascript:login2();">Login</a>&nbsp;|&nbsp;
<a href="<%=basePath %>/register.jsp">Register</a>&nbsp;</td>
</tr>
</table>
</form>
</div>
<!-- login form end -->
</body>
</html>